@import "public";

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit*/
  color: #999999;
}

input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #999999;
}

input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #999999;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* IE 10+ */
  color: #999999;
}

#register {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  .r-top {
    width: 100%;
    .height(185rem);
    background: url(../images/register-icon.png) center top no-repeat;
    .backSize(102rem, 102rem);
    color: #ffffff;
    .fontSize(32rem);
    text-align: center;
    .marginTop(90rem);
    .paddingTop(110rem);
  }
  .r-input {
    .width(558rem);
    .marginAuto(70rem, 0);
    .ri-list {
      .width(558rem);
      .height(90rem);
      .marginAuto(35rem, 0);
      .borderRadius(6rem);
      .border(2rem, solid, #dbdbdb);
    }
    .ri-phone {
      background: url(../images/phone.png) no-repeat #ffffff;
      .backPosition(28rem, 24rem);
      .backSize(30rem, 42rem);
      input {
        //opacity: 0;
        background: none;
        border: none;
        .width(480rem);
        .height(88rem);
        .marginLeft(80rem);
        color: #000000;
        float: left;
        .fontSize(28rem);
        outline: none;

      }
    }
    .ri-code {
      background: url(../images/dun.png) no-repeat #ffffff;
      .backPosition(28rem, 24rem);
      .backSize(35rem, 38rem);
      input {
        //opacity: 0;
        background: none;
        border: none;
        .width(280rem);
        .height(88rem);
        .marginLeft(100rem);
        color: #000000;
        float: left;
        .fontSize(28rem);
        outline: none;

      }
      .get-code {
        float: left;
        .width(155rem);
        .height(55rem);
        .lineHeight(55rem);
        .borderRadius(6rem);
        text-align: center;
        .fontSize(24rem);
        color: #ffffff;
        text-decoration: none;
        background-color: #e84a55;
        .marginTop(16rem);
      }
    }
  }
  .r-login {
    .width(558rem);
    .height(90rem);
    .marginAuto(60rem, 0);
    background-color: @Cred;
    text-align: center;
    .lineHeight(90rem);
    color: #ffffff;
    .fontSize(30rem);
    .borderRadius(6rem);
    a {
      width: 100%;
      .height(90rem);
      display: block;
    }
  }
  .r-protocol {
    width: 100%;
    color: #808080;
    .padding(0, 40rem, 0, 40rem);
    .fontSize(24rem);
    .marginTop(40rem);
    .box-style{
      .width(26rem);
      .height(26rem);
      float: left;
      .marginTop(4rem);
      position: relative;
      input{
        .width(26rem);
        .height(26rem);
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 10;
      }
      img{
        .width(26rem);
        .height(26rem);
        position: absolute;
        top: 0;
        left: 0;
        opacity: 1;
        z-index: 9;

      }
    }
    .box-link{
      .marginLeft(10rem);
      float: left;
    }
    input {
      vertical-align: middle;
    }
    a {
      color: @Cred;
    }
  }
  .protocol {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    z-index: 100;
    .protocol-inside {
      width: 100%;
      height: 100%;
      background-color: #ffffff;
      position: absolute;
      .top(70rem);
      left: 0;
      .more-inside {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        //.height(600rem);
        .padding(50rem, 30rem, 0, 30rem);
        overflow-y: scroll;
      }
      h2{
        text-align: center;
        .fontSize(32rem);
      }
      h3 {
        width: 100%;
        .fontSize(28rem);
        text-indent: 16px;
        color: #000000;
      }
      .protocol-list {
        .marginTop(50rem);
        .lineHeight(42rem);
        .fontSize(24rem);
        color: #999999;
        p{
          text-indent: 30px;
          span{
            display: block;
            text-indent: 30px;
          }
        }
      }
      .protocol-close {
        .width(52rem);
        .height(52rem);
        position: absolute;
        .top(-26rem);
        .right(20rem);
        background: url(../images/close.png) center no-repeat;
        .backSize(52rem, 52rem);
      }
    }

  }
  .r-tips {
    .width(360rem);
    .padding(20rem, 20rem, 20rem, 20rem);
    .marginAuto(60rem, 0);
    color: #ffffff;
    .fontSize(28rem);
    background-color: #98282e;
    .borderRadius(8rem);
    text-align: center;
    //.lineHeight(11rem);
  }
  .r-right{
    width: 100%;
    position: absolute;
    .bottom(50rem);
    left: 0;
    .fontSize(22rem);
    color: #808080;
    text-align: center;
    z-index: 99;
  }
}
